<template>
  <div class="view-main">
    <div class="view-box">
      <div class="view-main-title">
        <span class="view-main-title-config">基本参数选择</span>
        <div
          class="view-main-title-address el-icon-folder-opened"
          @click="addressSelectPlanFn()"
        >
          选址方案
        </div>
      </div>
      <el-form ref="myform" :model="sizeForm" label-width="94px" size="mini">
        <el-form-item label="行政区域：" prop="originArea">
          <el-cascader
            v-model="sizeForm.originArea"
            :options="options"
            ref="elCasOptionRef"
            :props="props"
            size="small"
            @change="handleOption"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="项目名称：" prop="projectName">
          <el-input v-model="sizeForm.projectName"></el-input>
        </el-form-item>
        <el-form-item label="建设单位：" prop="constructionUnit">
          <el-input v-model="sizeForm.constructionUnit"></el-input>
        </el-form-item>
        <el-form-item label="用地面积：">
          <el-col :span="9">
            <el-input v-model="sizeForm.siteAreaMin" />
          </el-col>
          <el-col class="line" :span="4">--</el-col>
          <el-col :span="9">
            <el-input v-model="sizeForm.siteAreaMax" />
          </el-col>
        </el-form-item>
        <el-form-item label="用地类型：" prop="siteType">
          <el-cascader
            v-model="sizeForm.siteType"
            :options="landOptions"
            ref="elCasLandOption"
            :props="landProps"
            size="small"
            clearable
            :show-all-levels="false"
            @change="handleLandOption"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div class="view-main-title">
        <span class="view-main-title-config">禁止压盖</span>
      </div>
      <div class="view-main-checkBox">
        <el-checkbox-group v-model="sizeForm.checkList" size="medium">
          <el-checkbox
            v-for="item in checkList"
            :key="item.id"
            :label="item.id"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div class="view-main-title">
        <span class="view-main-title-config">选址影响因素配置</span>
        <div class="view-main-title-address" @click="addressSelectReasonFn()">
          配置
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="300"
        empty-text="暂无数据"
      >
        <el-table-column align="center" prop="factorName" label="因子名称">
          <template #default="scope">{{
            scope.row.factorName || "-"
          }}</template>
        </el-table-column>
        <el-table-column align="center" prop="rule" label="条件">
          <template #default="scope">{{ scope.row.rule || "-" }}</template>
        </el-table-column>
        <el-table-column align="center" prop="condition" label="约束值">
          <template #default="scope">{{ scope.row.condition || "-" }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="view-main-button">
      <div class="view-main-button-buttonBox">
        <el-button
          type="primary"
          size="small"
          @click="startChoose"
          :loading="loading"
          >开始选址</el-button
        >
        <el-button
          type="info"
          size="small"
          icon="el-icon-refresh-right"
          @click="resetAddress"
          >重置分析</el-button
        >
      </div>
      <p class="view-main-button-savePlan">保存方案</p>
    </div>

    <AddressSelectPlan :visible="visible" @close="visible = false" />
    <AddressSelectReason
      :visible="visible1"
      @close="
        (e) => {
          visible1 = e;
        }
      "
      @get-new-reason="getNewReason"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from "vue";
import AddressSelectPlan from "./components/addressSelectPlan.vue";
import AddressSelectReason from "./components/addressSelectReason.vue";
import AreaData from "./areaData.js";
import { ElNotification } from "element-plus";
import UseLandData from "./useLandData.js";
import { QueryTaskSearch } from "../yizhangtu/func/queryTaskSearch";
import { mapView } from "../yizhangtu/func/index";
import store from "@/store/index";
import Bus from "../yizhangtu/func/Bus";
const props = reactive({
  label: "name",
  value: "id",
  children: "childrens",
  // checkStrictly: true,//选择任意一级选项
});
const landProps = reactive({
  label: "name",
  value: "id",
  // checkStrictly: true,
});
import type { ElForm } from "element-plus";
const myform = ref<InstanceType<typeof ElForm>>();
interface ParamsType {
  originArea: string; //行政区域
  projectName: string; //项目名称
  constructionUnit: string; //建设单位
  siteAreaMin: string; //用地面积
  siteAreaMax: string; //用地面积
  siteType: string; //用地类型
  checkList: number[];
}
const sizeForm = reactive<ParamsType>({
  originArea: "", //行政区域
  projectName: "", //项目名称
  constructionUnit: "", //建设单位
  siteAreaMin: "", //用地面积
  siteAreaMax: "", //用地面积
  siteType: "", //用地类型
  checkList: [],
});
//行政区域
let options: any = reactive(AreaData); //行政区域
let elCasOptionRef = ref("");
let loading = ref(false);
//用地类型
let landOptions: any = reactive(UseLandData); //用地
let elCasLandOption = ref("");
interface CheckType {
  id: number;
  label: string;
}
const checkList: CheckType[] = [
  { id: 1, label: "审批备案" },
  { id: 2, label: "基本农田" },
  { id: 3, label: "生态红线" },
  { id: 4, label: "其他图层" },
];
let tableData = reactive([]);
let visible = ref(false);
let visible1 = ref(false);
//选址方案
const addressSelectPlanFn = () => {
  visible.value = true;
};
//选址因子
const addressSelectReasonFn = () => {
  //tableData=[]
  visible1.value = true;
};
//行政区域改变事件
const handleOption = (value: string) => {
  /**
   *  @param  nodeId: 传到后端的id
   */
  // 获取当前节点选择的id
  // let node = elCasOptionRef.value.getCheckedNodes();
  // sizeForm.originArea = node[0].value;
  console.log(value, "value");
  sizeForm.originArea = value;
};
//用地改变事件
const handleLandOption = (value: string) => {
  // 获取当前节点选择的id
  // let node = elCasLandOption.value.getCheckedNodes();
  /**
   *  @param  nodeId: 传到后端的id
   */
  sizeForm.siteType = value;
};
//警告提醒弹窗
const openNoticel = (warMeg: string): void => {
  ElNotification.error({
    title: "警告",
    message: warMeg,
    position: "top-left",
    offset: 200,
  });
};
//选址
const startChoose = async () => {
  if (sizeForm.originArea == "") {
    openNoticel("请选择行政区域");
    return;
  }
  if (sizeForm.projectName == "") {
    openNoticel("请输入要查询的项目名称");

    return;
  }
  if (sizeForm.constructionUnit == "") {
    openNoticel("请输入要查询的建设单位");
    return;
  }
  if (sizeForm.siteAreaMin == "") {
    openNoticel("请输入最小用地面积");
    return;
  }
  if (sizeForm.siteAreaMax == "") {
    openNoticel("请输入最大用地面积");
    return;
  }
  if (sizeForm.siteType == "") {
    openNoticel("请选择用地类型");
    return;
  }
  if (sizeForm.checkList.length === 0) {
    openNoticel("请选择禁止压盖类型");
    return;
  }
  console.log(sizeForm, "sizeForm");
  let _where = "";
  // if(sizeForm.originArea){
  // _where +='dlmc='+sizeForm.originArea;
  // }
  // if(sizeForm.siteType){
  //   _where+=' siteType='+sizeForm.siteType
  // }
  //接口地址
  // const _layerURL =
  //   "https://maps.cityofrochester.gov/arcgis/rest/services/RPD/RPD_Reorg/MapServer" +
  //   "/legend?f=pjson";
  // const queryTask = new QueryTaskSearch(mapView, _layerURL, _where);
  // const queryList = await queryTask.QueryTaskResult();
  // if (queryList.length > 0) {
  //   store.dispatch("searchresult/ADD_RESULT", queryList);
  //   //打开搜索结果面板
  //   store.dispatch("searchresult/OPEN_PANEL");
  // }
  const params = {
    open: true,
    serviceUrl: 'https://maps.cityofrochester.gov/arcgis/rest/services/RPD/RPD_Reorg/MapServer',
    id: '8882363a-2706-4ee6-a027-21221005953a',
    name: 'RPD Car Beat Query',
    serviceType: '1',
    type: "addOrRemoveLayer",
  };
  Bus.$emit("map-handle", params);
  //绘制点图
  const params1 = {
    open: true,
    serviceUrl: 'https://maps.cityofrochester.gov/arcgis/rest/services/RPD/RPD_Reorg/MapServer',
    id: '8882363a-2706-4ee6-a027-21221005953a',
    name: 'measureDistance',
    serviceType: '2',
    type: "measure",
  };
  Bus.$emit("map-handle", params1);
  // loading.value = true;
};
//重置选址
const resetAddress = () => {
  myform.value?.resetFields();
  sizeForm.siteAreaMax = "";
  sizeForm.checkList = [];
  console.log(myform.value, "myform.value");
};
//配置接受子级数据
const getNewReason = (reasonArr) => {
  console.log(reasonArr, "reasonArr");
  tableData.push.apply(tableData, reasonArr.flat(1));
  console.log(tableData, "tableData");
};
onMounted(() => {});
</script>

<style lang="less" scoped>
.view-main {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;
  .view-box {
    min-height: calc(100vh - 150px);
    padding-right: 10px;
  }
  .el-form {
    padding-left: 10px;
    .el-form-item {
      width: 90%;
      .el-select {
        width: 100%;
      }
      .el-input__inner {
        width: 100% !important;
        .el-input__inner {
          width: 100% !important;
        }
      }
    }
  }
  &-title {
    width: 98%;
    margin: 5px;
    height: 24px;
    background-color: #eee;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-config {
      padding-left: 10px;
      color: #333;
      font-size: 14px;
      font-weight: 500;
      border-left: 3px solid #1299f5;
    }
    &-address {
      color: #1299f5;
      font-size: 12px;
      padding-right: 10px;
      cursor: pointer;
    }
  }
  &-checkBox {
    padding-left: 10px;
  }
  &-button {
    width: 100%;
    flex-direction: 1;
    border-top: 1px solid #eee;
    padding: 10px;
    box-sizing: border-box;
    // position: fixed;
    // bottom: 10px;
    &-buttonBox {
      width: 60%;
      margin: 0 auto;
      text-align: center;
    }
    &-savePlan {
      font-size: 12px;
      color: #1299f5;
      text-align: center;
      margin-bottom: 0;
    }
    // padding-top: 100px;
    // display: flex;
    // justify-content: center;
  }
}
</style>
